<template>
  <div class="warpper">
    <h1>我是app组件</h1>
    <button @click="test1">获取atguigu数据</button>
    <button @click="test2">获取头条数据</button>
    <button @click="test3">获取百度数据</button>
  </div>
</template>


<script>
import axios from 'axios';
export default {
  name: 'App',
  methods: {
    test1() {
      axios
        .get('http://sph-h5-api.atguigu.cn/api/product/getBaseCategoryList')
        .then(
          (res) => {
            console.log('数据请求成功', res.data.data);
          },
          (err) => {
            console.log('数据请求失败', err.massage);
          }
        );
    },
    test2() {
      axios
        .get(
          'http://localhost:8080/toutiao/hot-event/hot-board/?origin=toutiao_pc'
        )
        .then(
          (res) => {
            console.log('数据请求成功', res.data.data);
          },
          (err) => {
            console.log('数据请求失败', err.massage);
          }
        );
    },
    test3() {
      axios
        .get('http://localhost:8080/baidu/widget?id=LocalNews&ajax=json')
        .then(
          (res) => {
            console.log(
              '数据请求成功',
              res.data.data.LocalNews.data.rows.first
            );
          },
          (err) => {
            console.log('数据请求失败', err.massage);
          }
        );
    },
  },
};
</script>



<!-- 基础样式 -->
<style>
.warpper {
  background-color: #ddd;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px;
}
</style>